<template>
	<view class="content">
		<!-- 使用css画一段圆弧 -->
		<view class="pure_top"></view>
		<view class="container">
			<view class="container_tab">
				<view class="container_item" :class="item.id===TabCur?'current':''" v-for="(item,index) in tabs" :key="index" @tap="tabSelect(item.id)">
<!-- 					<image class="item_img" :src="tabs[index].img" mode=""></image> -->
					<span class="item_title">{{item.catName}}</span>
				</view>
			</view>
			<view class="product_item" v-for="(item, index) in tlist" :key="index" @click="goGoodsDetail(item)"> 
				<img class="item_img" :src="item.originalImg | formatUrl" mode=""></img>
				<view class="item_info">
					<view class="item_top">
						<view class="item_top_text">
							<span style="font-size: 15px;">{{item.goodsName && item.goodsName.length >= 15 ? item.goodsName.slice(0, 15) + '...' : item.goodsName }}</span>
							<span style="font-size: 13px;color: #666;">{{item.goodsBrief && item.goodsBrief.length >= 15 ? item.goodsBrief.slice(0, 15) + '...' : item.goodsBrief }}</span>
						</view>
						<!-- <view :class="collections.indexOf(item.id) !== -1 ? 'icon current' : 'icon' " style="color: #333; align-self: flex-start;" @click.stop="updateCollection(item.id)">&#xe61e;</view> -->
					</view>
					<view class="item_bottom">
						<span class="item_top_text" >¥ &nbsp;&nbsp;{{item.shopPrice}}</span>
<!-- 						<view class="shop_cart" @click.stop="addShopCart(item.id)">加入购物车 <view class="icon">&#xe61f;</view></view> -->
					</view>
				</view>
			</view>
		</view>
    </view>
</template>
<script>
	import goodsApis from '@/common/services/goods.js';
	import otherApis from '@/common/services/other.js';
	import { getQuery } from '@/utils/utils.js'
	export default {
		/**
		 * 当 searchInput 配置 disabled 为 true 时触发
		 */
		onNavigationBarSearchInputClicked(e) {
			console.log('事件执行了')
			uni.navigateTo({
				url: '../search/search'
			});
		},
		/**
		 *  点击导航栏 buttons 时触发
		 */
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '../chat/chat',
				animationType: 'zoom-out',
				animationDuration: 3000
			});
		},
		data() {
			return {
				tlist: [],
				TabCur: 1,
				tabs: [
				],
				collections: [1]
			}
		},
		computed:{
		},
		filters:{
			formatUrl (url) {
				return url && url.indexOf('http') !== -1 ? url : 'http://106.13.76.109:8080/xsmall/sys/common/view/'+ url
			}
		},
		onShow() {
			goodsApis.getGoodsClass().then(res => {
				const length = res.records.length;
				this.tabs = res.records;
				let state = +getQuery('state') || 0;
				uni.getStorage({
					key: 'tabCur',
					success: res => {
						if (res.data) {
							state = res.data;
							uni.setStorageSync('tabCur', '')
						}

					}
				})
				this.TabCur = this.tabs[state].id;
				goodsApis.getGoodsList({ catId: this.TabCur }).then(res => {
					this.tlist = res.records
				})
			}).catch(error => {
				console.log('error', error)
			})
		},
		methods: {
			goGoodsDetail(item) {
				uni.navigateTo({
					url: `../goods/goods?goodsId=${item.id}`
				})
			},
			tabSelect(id) {
				this.TabCur = id;
				console.log('id:', id)
				this.tlist = [];
				uni.showLoading()
				goodsApis.getGoodsList({ catId: id }).then(res => {
					this.tlist = res.records
					uni.hideLoading()
				})
			},
			updateCollection(id) {
				console.log('id:', id)
				if (this.collections.indexOf(id) !== -1) {
					otherApis.deleteCollection(id).then(() => {
					})
					this.collections.splice(this.collections.indexOf(id), 1)
				} else {
					this.collections.push(id)
					otherApis.addCollection(id).then(() => {
					})
				}
			},
			addShopCart(id) {
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '成功添加购物车～'
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
@font-face {
		font-family: 'iconfont';
		src: url('../../css/font/iconfont.eot');
		src: url('../../css/font/iconfont.eot?#iefix') format('embedded-opentype'),
		url('../../css/font/iconfont.woff') format('woff'),
		url('../../css/font/iconfont.ttf') format('truetype'),
		url('../../css/font/iconfont.svg#iconfont') format('svg');
	}
	.icon {
		font-family:"iconfont" !important;
		font-size: 44upx;
		font-weight: 200;
		font-style:normal;
		-webkit-font-smoothing: antialiased;
		-webkit-text-stroke-width: 0.2px;
		-moz-osx-font-smoothing: grayscale;
		cursor: pointer;
		color: #E80505;
		&:hover {
			color: #E80505;
		}
	}
page {
	background-color: #f8f8f8;
}
.content {
	width: 100%;
	height: 100%;
	.pure_top {
		width: 100%;  
		height: 80upx;  
		z-index: -1;
		background-image:linear-gradient( 135deg, #FDD819 10%, #E80505 100%);
	}
	.class_banner {
		margin-bottom: 20upx;
		height: 200upx;
		overflow: hidden;
		.class_banner_poster {
			width: 100%;
		}
	}
	.container {
		height: 100%;
		.container_tab {
			display: flex;
			margin-bottom: 20upx;
			box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
			.current {
				font-weight: 700;
				color: #E80505 !important;
				&:after{
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					-webkit-transform: translateX(-50%);
					-ms-transform: translateX(-50%);
					transform: translateX(-50%);
					width: 26upx;
					height: 0;
					border-bottom: 2px solid #E80505;
				}
			}
			.container_item {
				flex:1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background-color: white;
				height: 68upx;
				padding: 0 10upx;
				position: relative;
				z-index: 10;
				color: #303133;
				.item_title {
					font-size: 28upx;
					font-family: "Microsoft YaHei"；
					&:hover {
						color: #E80505;
					}
				}
			}
		}

		.product_item {
			height: 240upx;
			display: flex;
			border-radius: 8upx;
			margin:20upx;
			position: relative;
			box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1);
			background-color: white;
			.item_img {
				width: 240upx;
				height: 240upx;
				border-radius: 10upx;
				margin-right: 30upx;
				padding: 5px;
				box-sizing: border-box;
			}
			.item_info {
				padding: 10upx 10upx 10upx 5upx;
				display: flex;
				flex-direction: column;
				flex: 1;
				position: relative;
				.item_line {
					position: absolute;
					display: inline-block;
					height: 1px;
					width: 100%;
					background-color: #f0f0f0;
					top: 50%;
				}
				.item_top {
					display: flex;
					justify-content: space-between;
					align-items: center;
					flex: 1;
					.current {
						color: #E80505 !important;
					}
					.item_top_text {
						display: flex;
						flex-direction: column;
					}
				}
				.item_bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;
					flex: 1;
					.shop_cart {
						height: 56upx;
						border: 1upx solid #E80505;
						font-size: 26upx;
						flex: 0.8;
						display: flex;
						align-items: center;
						padding-left: 20upx;
						box-sizing: content-box;
						border-radius: 16upx;
						color: #E80505;
						.icon {
							margin-left: 10upx;
						}
					}
					.item_top_text {
						flex: 1;
						color: #E80505;
						font-weight: 900;
					}
				}
			}
		}
	}
}

</style>